<template>
  <div>
    <el-card class="operator-button-card">
      <template #header>
        <div class="flex justify-between items-center">
          <h2 class="operator-button-label">{{ $t('operator.flyparameter') }}</h2>
          <div>
            <el-button size="small" text @click="handleOpenProgressDialog">{{
              $t('flyparameter.view_publish_progress')
            }}</el-button>
            <el-button
              v-if="isAuth('10400202.MANAGE')"
              type="primary"
              size="small"
              :loading="btnLoading"
              @click="saveForm"
              >{{ $t('common.save') }}</el-button
            >
          </div>
        </div></template
      >

      <el-form
        ref="downloadConfigForm"
        class="center"
        :model="versionForm"
        size="small"
        label-width="250px"
      >
        <el-form-item :label="$t('flyparameter.json_format_version') + ':'">
          <div>
            <el-radio v-model="versionForm.jsonVersion" label="V1" border
              >V1</el-radio
            >
            <el-radio v-model="versionForm.jsonVersion" label="V2" border
              >V2</el-radio
            >

            <el-button
              v-if="isAuth('10400202.MANAGE') && triggerPublishBtn"
              type="primary"
              size="small"
              :loading="btnLoading2"
              style="float: right"
              @click="triggerPublish"
              >{{ $t('flyparameter.apply_full_publish') }}</el-button
            >
          </div>
        </el-form-item>
      </el-form>
    </el-card>

    <el-dialog
      :title="$t('flyparameter.progress_dialog_titile')"
      v-model="publishProgressDialogVisible"
      append-to-body
      width="40%"
      @close="handleCloseProgressDialog"
    >
      <el-table
        v-if="progressData.length > 0"
        :show-header="false"
        :data="progressData"
      >
        <el-table-column label="NAME">
          <template v-slot="{ row }">
            <div style="display: flex; flex-direction: row">
              <div>
                <img
                  :src="getImg(row.iconUrl, row.os)"
                  width="50px"
                  class="mr-3"
                  alt
                  @error="
                    () =>
                      (app.iconUrl = require('@/assets/images/default-icon.png'))
                  "
                />
              </div>
              <div style="margin-left: -5px; margin-top: 5px">
                <div>{{ row.appName }}</div>
                <div>{{ row.appPackageName }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="SPEED OF PROGRESS">
          <template v-slot="{ row }">
            <span v-if="row.total == 0">No Terminals binded in the app</span>
            <div v-else>
              <div
                style="
                  text-align: center;
                  display: flex;
                  align-content: space-around;
                "
              >
                <div>
                  {{ row.total - row.publishingNum }}
                </div>
                <div style="flex: auto">
                  {{
                    row.total == 0
                      ? 0
                      : ((row.total - row.publishingNum) / row.total).toFixed(
                          2
                        ) * 100
                  }}%
                </div>
                <div>
                  {{ row.total }}
                </div>
              </div>
              <el-progress
                :show-text="false"
                :percentage="
                  row.total == 0
                    ? 0
                    : ((row.total - row.publishingNum) / row.total).toFixed(2) *
                      100
                "
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column width="20" />
      </el-table>
      <el-empty v-else description="No Data"></el-empty>
    </el-dialog>
  </div>
</template>

<script>
import {
  fullPublishParameterFile,
  getParameterJsonVersion,
  queryParameterPublishProgress,
  setParameterJsonVersion
} from '@/api/operator'
import { getIcon } from '@/utils'
import { isAuth } from '@/utils'

export default {
  props: {
    operatorId: {
      require: true,
      type: String,
      default: null
    }
  },
  data() {
    return {
      triggerPublishBtn: false,
      btnLoading: false,
      btnLoading2: false,
      versionForm: {
        operatorId: this.operatorId,
        jsonVersion: ''
      },
      publishProgressDialogVisible: false,
      progressData: []
    }
  },
  created() {
    this.getOperatorFlyparameterJsonVersion()
  },
  methods: {
    saveForm() {
      this.$confirm(
        this.$t('operator.save_cfg') +
          '(' +
          this.$t('flyparameter.first_confirm') +
          ')',
        this.$t('page.tip'),
        {
          confirmButtonText: this.$t('page.confirm'),
          cancelButtonText: this.$t('page.cancel'),
          type: 'warning'
        }
      ).then(() => {
        this.$message({
          message: this.$t('flyparameter.confirm_tip_again'),
          type: 'warning'
        })
        setTimeout(() => {
          this.$confirm(
            this.$t('operator.save_cfg') +
              '(' +
              this.$t('flyparameter.second_confirm') +
              ')',
            this.$t('page.tip'),
            {
              confirmButtonText: this.$t('page.confirm'),
              cancelButtonText: this.$t('page.cancel'),
              type: 'warning'
            }
          ).then(() => {
            this.$message({
              message: this.$t('flyparameter.confirm_tip_last'),
              type: 'warning'
            })
            setTimeout(() => {
              this.$confirm(
                this.$t('operator.save_cfg') +
                  '(' +
                  this.$t('flyparameter.third_confirm') +
                  ')',
                this.$t('page.tip'),
                {
                  confirmButtonText: this.$t('page.confirm'),
                  cancelButtonText: this.$t('page.cancel'),
                  type: 'warning'
                }
              ).then(() => {
                this.btnLoading = true
                setParameterJsonVersion(this.versionForm)
                  .then((res) => {
                    this.triggerPublishBtn = true
                    this.btnLoading = false
                    this.$message({
                      type: 'success',
                      message: this.$t('common.success')
                    })
                  })
                  .catch((e) => {
                    this.btnLoading = false
                    this.$confirmError(e)
                  })
              })
            }, 1000)
          })
        }, 1000)
      })
    },
    getOperatorFlyparameterJsonVersion() {
      getParameterJsonVersion(this.operatorId)
        .then((res) => {
          if (res != null && res != '') {
            this.versionForm.jsonVersion = res
          } else {
            this.versionForm.jsonVersion = 'V2'
          }
        })
        .catch((err) => {
          this.$confirmError(err)
        })
    },
    triggerPublish() {
      this.$confirm(
        this.$t('flyparameter.apply_full_publish_confirm'),
        this.$t('page.tip'),
        {
          confirmButtonText: this.$t('page.confirm'),
          cancelButtonText: this.$t('page.cancel'),
          type: 'warning'
        }
      ).then(() => {
        this.$message({
          message: this.$t('flyparameter.confirm_tip_again'),
          type: 'warning'
        })
        setTimeout(() => {
          this.$confirm(
            this.$t('flyparameter.apply_full_publish_confirm'),
            this.$t('page.tip'),
            {
              confirmButtonText: this.$t('page.confirm'),
              cancelButtonText: this.$t('page.cancel'),
              type: 'warning'
            }
          ).then(() => {
            this.$message({
              message: this.$t('flyparameter.confirm_tip_last'),
              type: 'warning'
            })
            setTimeout(() => {
              this.$confirm(
                this.$t('flyparameter.apply_full_publish_confirm'),
                this.$t('page.tip'),
                {
                  confirmButtonText: this.$t('page.confirm'),
                  cancelButtonText: this.$t('page.cancel'),
                  type: 'warning'
                }
              ).then(() => {
                this.btnLoading2 = true
                fullPublishParameterFile(this.operatorId)
                  .then((res) => {
                    this.btnLoading2 = false
                    this.$message({
                      type: 'success',
                      message: this.$t('common.success')
                    })
                  })
                  .catch((err) => {
                    this.$confirmError(err)
                  })
              })
            }, 1000)
          })
        }, 1000)
      })
    },
    handleOpenProgressDialog() {
      this.publishProgressDialogVisible = true
      queryParameterPublishProgress(this.operatorId).then((res) => {
        this.progressData = res
      })
      this.timer = setInterval(() => {
        queryParameterPublishProgress(this.operatorId).then((res) => {
          this.progressData = res
        })
      }, 10000)
    },
    handleCloseProgressDialog() {
      this.publishProgressDialogVisible = false
      clearInterval(this.timer)
    },
    getImg(url, os) {
      return getIcon(url, os)
    },
    isAuth
  }
}
</script>

<style lang="scss" scoped>
.l-card {
  margin: 20px 36px;
}
</style>
